<template>
    <div>
        <section class="title">
            <div class="find">
                <div class="clearfix">
                    <div class="col-sm-4 clearfix">
                        <label class="col-sm-3 control-label">创建时间：</label>
                        <div class="col-sm-4">
                            <div class="input-group date">
                                <input type="text" class="form-control pull-right" id="datepicker9" placeholder="YYYY-MM-DD" v-model="timeData.timeStart">
                            </div>
                        </div>
                        <div class="col-sm-1" style="height:34px;line-height:34px">--
                            <!-- <span style="display:inline-block;height:34px;line-height:34px"></span> -->
                        </div>
                        <div class="col-sm-4">
                            <div class="input-group date">
                                <input type="text" class="form-control pull-right" id="datepicker10" placeholder="YYYY-MM-DD" v-model="timeData.timeEnd">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8 clearfix">
                        <div class="col-sm-2 col-sm-offset-1">
                            <button type="button" class="btn btn-primary" @click="getTable()">查询</button>
                        </div>
                        <div class="col-sm-2 col-sm-offset-7">
                            <button type="button" class="btn btn-primary">导出</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="clearfix">
            <div style="width:500px;margin:0 auto">
                <div class="box">
                    <div class="box-body">
                        <table id="example" class="table table-bordered table-hover" style="font-size:14px;text-align:center">
                            <thead style="font-weight:700">
                                <tr>
                                    <td>序号</td>
                                    <td>时间</td>
                                    <td>瞬时流量(m²/h)</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-if="list.length==0">
                                    <td colspan="999">暂无数据</td>
                                </tr>
                                <tr v-for="(item,index) in list" :key="item.value">
                                    <td>{{index}}</td>
                                    <td>{{item.time}}</td>
                                    <td>{{item.drainDay}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import utils from "@/utils";

export default {
    data() {
        return {
            timeData: {
                timeStart: utils.nowDate(-7),
                timeEnd: utils.nowDate(0),
                userNum: this.$route.query.userNum
            },
            list:[]
        }
    },
    mounted() {
        this.selectDate1()
        this.selectDate2()
        this.getTable()

    },
    methods: {
        //日期选择
        selectDate1() {
            $("#datepicker9")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'month',
                    minView: 'month',
                })
                .on("changeDate", ev => {
                    this.timeData.timeStart = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker10")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'month',
                    minView: 'month'
                })
                .on("changeDate", ev => {
                    this.timeData.timeEnd = ev.target.value;
                });
        },
        getTable() {
            this.$api.tongji.dinstant(this.timeData).then(res => {
                if (res.success) {
                    this.list = res.data.list
                }
            });
        }
    }
}
</script>

<style>
</style>
